<template>
	<view :data-theme="theme">
		<view class="CommissionRank">
			<view class="header">
				<view class="rank" v-if="ranking">
					您目前的排名
					<text class="num">{{ ranking }}</text>
					名
				</view>
				<view class="rank" v-else>您目前暂无排名</view>
			</view>
			<view class="wrapper">
				<view class="nav acea-row row-around">
					<view class="item" :class="active == index ? 'font_color' : ''" v-for="(item, index) in navList" :key="index" @click="switchTap(index)">
						{{ item }}
					</view>
				</view>
				<view class="list">
					<view class="item acea-row row-between-wrapper" v-for="(item, index) in rankList" :key="index">
						<view class="num" v-if="index <= 2">
							<image :src="'../static/images/no' + (index + 1) + '.png'"></image>
						</view>
						<view class="num" v-else>
							{{ index + 1 }}
						</view>
						<view class="picTxt acea-row row-between-wrapper">
							<view class="pictrue">
								<image :src="item.avatar"></image>
							</view>
							<view class="text line1">{{ item.nickname }}</view>
						</view>
						<view class="people font_color">￥{{ item.brokeragePrice }}</view>
					</view>
				</view>
				<view class="loadingicon acea-row row-center-wrapper">
					<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				</view>
				<view class="noCommodity" v-if="rankList.length == 0 && isShow">
					<emptyPage title="暂无排行～" mTop="30%" :imgSrc="urlDomain + 'crmebimage/presets/noJilu.png'"></emptyPage>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getBrokerageRank } from '@/api/user.js';
import { toLogin } from '@/libs/login.js';
import emptyPage from '@/components/emptyPage.vue';
import { mapGetters } from 'vuex';
import { setThemeColor } from '@/utils/setTheme.js';
const app = getApp();
export default {
	components: {
		emptyPage
	},
	data() {
		return {
			urlDomain: this.$Cache.get('imgHost'),
			navList: ['周排行', '月排行'],
			active: 0,
			rankList: [],
			loadend: false,
			loading: false,
			loadTitle: '加载更多',
			type: 'week',
			ranking: 0,
			isShow: false,
			theme: app.globalData.theme,
			bgColor: '#e93323'
		};
	},
	computed: mapGetters(['isLogin', 'uid']),
	watch: {
		isLogin: {
			handler: function (newV, oldV) {
				if (newV) {
					this.getBrokerageRankList();
				}
			},
			deep: true
		}
	},
	onLoad() {
		if (this.isLogin) {
			this.getBrokerageRankList();
		} else {
			toLogin();
		}
		let that = this;
		that.bgColor = setThemeColor();
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: that.bgColor
		});
	},
	methods: {
		switchTap: function (index) {
			this.active = index;
			this.type = index ? 'month' : 'week';
			this.page = 1;
			this.loadend = false;
			this.$set(this, 'rankList', []);
			this.getBrokerageRankList();
		},
		getBrokerageRankList: function () {
			if (this.loadend) return;
			if (this.loading) return;
			this.loading = true;
			this.loadTitle = '';
			this.loading = true;
			this.isShow = false;
			getBrokerageRank({
				type: this.type
			})
				.then((res) => {
					let list = res.data || [];
					this.$set(this, 'rankList', list);
					if (list.length > 0)
						this.ranking =
							list.findIndex((itm) => {
								return itm.id === this.uid;
							}) + 1;
					this.loading = false;
					this.isShow = true;
				})
				.catch((err) => {
					this.loading = false;
					this.loadTitle = '加载更多';
				});
		}
	},
	onReachBottom: function () {
		this.getBrokerageRankList();
	}
};
</script>

<style scoped lang="scss">
.CommissionRank .header {
	background: url('');
	@include main_bg_color(theme);
	width: 100%;
	height: 344rpx;
	background-size: 100% 100%;
}

.CommissionRank .header .rank {
	font-size: 33rpx;
	color: #fff;
	position: absolute;
	top: 160rpx;
	left: 48rpx;
}

.CommissionRank .header .rank .num {
	font-size: 51rpx;
	font-weight: bold;
	margin: 0 10rpx;
}

.CommissionRank .wrapper {
	width: 710rpx;
	background-color: #fff;
	border-radius: 14rpx;
	margin: -76rpx auto 0 auto;
}

.CommissionRank .wrapper .nav {
	height: 99rpx;
	border-bottom: 2.5rpx solid #f3f3f3;
	font-size: 30rpx;
	font-weight: bold;
	color: #999;
	line-height: 99rpx;
}
.CommissionRank .wrapper .nav .item.font_color {
	@include main_color(theme);
	@include tab_border_bottom(theme);
	margin-top: -2rpx;
}

.CommissionRank .wrapper .list {
	padding: 0 30rpx;
}

.CommissionRank .wrapper .list .item {
	border-bottom: 1px solid #f3f3f3;
	height: 101rpx;
	font-size: 28rpx;
}

.CommissionRank .wrapper .list .item .num {
	color: #666;
	width: 70rpx;
}

.CommissionRank .wrapper .list .item .num image {
	width: 40rpx;
	height: 40rpx;
	display: block;
}

.CommissionRank .wrapper .list .item .picTxt {
	width: 350rpx;
}

.CommissionRank .wrapper .list .item .picTxt .pictrue {
	width: 68rpx;
	height: 68rpx;
}

.CommissionRank .wrapper .list .item .picTxt .pictrue image {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
}

.CommissionRank .wrapper .list .item .picTxt .text {
	width: 262rpx;
	color: #333;
}

.CommissionRank .wrapper .list .item .people {
	width: 175rpx;
	text-align: right;
}
.font_color {
	@include price_color(theme);
}
</style>
